import React from 'react';
import Product from './Product';
import * as data from '../assets/js/mockproduct';
// 假设这是一个简单的子组件
const TitleComponent = ({ text }) => <div>商品名称：{text}</div>;

class ProductList extends React.Component{
    constructor() {
        super();
        this.state={
            products: []
        }
    }
    componentDidMount() {
        this.setState({
            products: data.products
        })
    }

    handleProductVote(productId){
        console.log("handleProductVote",productId)
    }

    render() {
        //单个组件渲染
        const product = data.products[0];
        const singleProduct = <Product key={product.id}  title={product.title} imageUrl={product.imgUrl}></Product>

        //商品名称组件渲染
        const titleComponents = data.products.map(item => (
            <TitleComponent key={item.id} text={item.title} />
        ))

        //商品按照点赞数排序
        const products = data.products.sort((a,b)=>{
            return  b.votes-a.votes;
        })
        //商品详情子组件渲染
        const productComponents = products.map(item=>(
            <Product key={item.id} id={item.id}  title={item.title} votes={item.votes} imageUrl={item.imgUrl} onVote={this.handleProductVote}></Product>
        ));

        return(<div className="ui items">
            <div>
                <p>商品列表</p>
            </div>
            {/*{singleProduct}*/}
            {titleComponents}
            {productComponents}
        </div>)
    }
}

export default ProductList;